<template>
    <div class="panle carlist">
      <!-- 相关推荐 -->
        <CrossLine></CrossLine>
        <div style="background: rgb(255, 255, 255);border-bottom: 1px solid#f0f0f0;">
          <div  class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span  class="usertit" style="margin-left: 3px; font-size: 14px;">相关推荐</span> 
              <span style="float:right;font-size:12px;color:#999;margin-right:15px;line-height:22px;position:relative;top:1px"  @tap="goReferralsList">查看更多</span>
            </a>
          </div>
        </div>
        <div>
            <ul class="cfix">
                <li v-for="(car,index) in activityCars">
                    <div class="box" @tap="goCarDetail(car.id)">
                        <div class="pic">
                          <img v-lazy="$store.state.appData.imgUrl+car.pic" v-if="car.pic != null">
                          <img src="static/img/noCarPic.png" v-else>
                        </div>
                        <p class="num" style="padding-left:5px;">
                            {{car.name}}
                        </p>
                        <!-- <span class="btn">热卖</span> -->
                        <div class="bottom cfix">
                          <p class="price" style="padding-left:5px;">
                              <span class="big_left">{{car.minGuidePrice}}万~{{car.maxGuidePrice}}万</span>
                              <!-- <span class="right">{{car.carNum}}条报价</span> -->
                          </p>
                        </div>
                    </div>                 
                </li>
            </ul>
            <div style="width:100%;text-align:center;font-size:13px;padding:5px;" v-if="activityCars.length == 0">暂无更多</div>
        </div>
    </div>
</template>
<script>
import mui from 'static/js/mui'
import { mapState } from 'vuex'
import CrossLine from '@/components/base/cross-line/cross-line'
import { recommendCarsBySeriesId } from '@/nodeApi/carDetail'
import { getcarModelDetail } from '@/api/carDetail'
  export default {
    data() {
      return {
        activityCars: [],
        obj:{
          carSeriesId:""
        },
        resData:{
          "carSeriesId":'',
          "pageNow":1,
          "pageSize":6
        }
      }
    },
    computed:{
        ...mapState([
            'carDetails',
        ]),
    },
    created() {},
    mounted() {
      this.HanderRecommendCarsBySeriesId()
    },
    //注意销毁掉监听，不然报错
    destroyed () {},
    components: {
      CrossLine
    },
    methods: {
      goCarDetail(carSeriesId){
        this.obj.carSeriesId=carSeriesId 
        getcarModelDetail(this.obj).then(resp => {
          this.$store.commit("GetCarDetails", resp.data) 
          mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
          this.$router.push({
              path: "/modelsOffer",
          })
        })
      },
      goReferralsList(){
        this.$router.push({
            path: '/modelsOffer/referralsList'
        })
      },
      more(){
        this.$router.push({
            path: '/filter/'
        })
      },
      HanderRecommendCarsBySeriesId() {
        //console.log(this.carDetails.allcarModelMsg)
        this.resData['carSeriesId'] = this.carDetails.allcarModelMsg.currentCar.carSriesId
        recommendCarsBySeriesId(this.resData).then(res => {
          this.activityCars = res.data.cars
        })
      }
    }
  }

</script>

<style scoped>
  /* 首页车型列表 */
  .carlist {
    padding-bottom: 0rem;
  }
  .panle {
    position: relative;
  }

  .panle .h4 {
    font-size:15px;
    padding: 9.5px 10px 9.5px 10px;
    background-color: #fff;
    margin-bottom:0px!important;
    text-align:center;
    color:#333333;
    border-bottom: 1px solid#f0f0f0; 
    height:40px;
  }
  .panle .h4 a.more {
    float: right;
    position: relative;
    padding-right: .5rem;
  }
  .cfix li {
    border-bottom: 1px solid#f0f0f0; 
  }
  .cfix:after {
    content: " ";
    position: absolute;
    right: -10px;
    top: -30px;
    bottom: -60px;
    width: 1px;
    border-right: #f0f0f0 1px solid;
    z-index: 50;
  }
  .carlist {
     background-color:#fff;color:#333333
   }
  .carlist ul {
    overflow:hidden;
  }
  .carlist li {
    width: 50%;
    float: left;
    height:0px;
    padding-bottom:43%;
    position: relative;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    background: #fff;
  }


  .carlist  div.box {
    position: relative;
    background-color:#fff;
    text-align: center;
    margin: 5px 8px 0px 8px;
  }
  .carlist  div.box .pic {
    overflow: hidden;
    margin:0;
    padding:0;
    background-color:#fff;
  }

  .carlist  div.box .pic img {
    width:78%;
    height:78%;
    position: relative;
  }
  
  .carlist  div.box .bottom {
    line-height:1.1rem;
    width: 100%;
    text-align: left;
    font-size: .6rem;
    color:#333333
  }
  .carlist  div.box .bottom p{
    margin:0px;font-size:0.65rem;color:#333333
  }
  .carlist  div.box .bottom p b{
    color:#ff6a27;
  }
  .num{
    text-align: left;
    margin-bottom:0px;
    color:#000000; 
    overflow: hidden;
    line-height: 0.8rem;
    height:  0.8rem;
  }
  .carlist  div.box .top {
    position: absolute;
    top: .16rem;
    left: .16rem;
    text-align: center;
  }

  .carlist  div.text {
    text-align: center;
    padding: .25rem 0 0;
    font-size: .7rem;
    position: absolute;
    top:9px;
    right: .25rem;
  }
  .price .big_left {
    color:#ff6a27;
    font-size:15px;
  }
  .price .right{
    float:right;
    font-size:11px;
    color:#666666;
  }
  .btn{
    width:36px;
    height:18px;
    line-height:18px;
    display: inline-block;
    border:1px solid #ff6a27;
    position: absolute;
    top:5px;
    left:5px;
    color:#ff6a27;
    border-radius: 3px;
    font-size:10px;
  }
  .carlist-top {
      margin-top:86px;
      min-height:0px;
  }
</style>
